<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行社系统 - 酒店订单详情</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <sidebar-nav 
                    current-page="hotel-orders"
                    @logout="handleLogout">
                </sidebar-nav>

                <!-- 主内容区 -->
                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">酒店订单详情</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <button type="button" class="btn btn-secondary" @click="goBack">
                                <i class="bi bi-arrow-left"></i> 返回
                            </button>
                        </div>
                    </div>

                    <!-- 订单基本信息 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">基本信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">城市</label>
                                    <div>{{ order.CityName }}</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">酒店名称</label>
                                    <div>{{ order.HotelName }}</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">关联订单</label>
                                    <div>{{ order.package_order_title || '-' }}</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">房型</label>
                                    <div>{{ order.RoomType }}</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">入住日期</label>
                                    <div>{{ formatDate(order.CheckInTime) }}</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">入住天数</label>
                                    <div>{{ order.StayDayCount }} 晚</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">房间数量</label>
                                    <div>{{ order.BookRoomCount }} 间</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">每晚房价</label>
                                    <div>{{ formatPrice(order.RoomUnitPrice) }}</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">总金额</label>
                                    <div>{{ formatPrice(order.TotalPrice) }}</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">联系人</label>
                                    <div>{{ order.ContactName }}</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">联系电话</label>
                                    <div>{{ order.ContactTelNo }}</div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">创建时间</label>
                                    <div>{{ formatDateTime(order.CreateTime) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 入住人信息 -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">入住人信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>姓名</th>
                                            <th>证件类型</th>
                                            <th>证件号码</th>
                                            <th>出生日期</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-if="guests.length === 0">
                                            <td colspan="4" class="text-center">暂无入住人信息</td>
                                        </tr>
                                        <tr v-else v-for="guest in guests" :key="guest.ID">
                                            <td>{{ guest.Name }}</td>
                                            <td>{{ getCertificateTypeText(guest.CertificateType) }}</td>
                                            <td>{{ guest.CertificateNo }}</td>
                                            <td>{{ formatDate(guest.BirthdayDTS) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script src="js/components/Sidebar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                order: {},
                guests: [],
                orderId: null
            },
            mounted() {
                // 从 URL 获取订单 ID
                const urlParams = new URLSearchParams(window.location.search);
                this.orderId = urlParams.get('id');
                if (this.orderId) {
                    this.loadOrderDetail();
                    this.loadGuests();
                }
            },
            methods: {
                async loadOrderDetail() {
                    try {
                        const response = await window.apiClient.get(`/api/hotel-orders/${this.orderId}`);
                        this.order = response.data;
                    } catch (error) {
                        console.error('加载订单详情失败:', error);
                        alert('加载订单详情失败');
                    }
                },
                async loadGuests() {
                    try {
                        const response = await window.apiClient.get(`/api/hotel/orders/${this.orderId}/passengers`);
                        this.guests = Array.isArray(response.data) ? response.data : [];
                    } catch (error) {
                        console.error('加载入住人信息失败:', error);
                        alert('加载入住人信息失败');
                    }
                },
                formatPrice(price) {
                    return price ? Number(price).toFixed(2) : '0.00';
                },
                formatDate(date) {
                    return date ? new Date(date).toLocaleDateString('zh-CN') : '-';
                },
                formatDateTime(datetime) {
                    return datetime ? new Date(datetime).toLocaleString('zh-CN') : '-';
                },
                getCertificateTypeText(type) {
                    return {
                        'passport': '护照',
                        'id_card': '身份证',
                        'other': '其他'
                    }[type] || type;
                },
                goBack() {
                    window.history.back();
                },
                handleLogout() {
                    auth.logout();
                }
            }
        });
    </script>
</body>
</html> 